<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    #footer_d1{
        height: 150px;
        text-align: center;
        line-height: 30px;
        background-color: rgba(0,0,0,0.8);
        color: #fff;
        font-size: 15px;
    }
</style>
<body>
<div id="app">
    <el-header>
        <el-row gutter="60">
            <el-col :span="8">
                <div style="margin-top: 25px;margin-left: 50px;">
                    <el-link type="info" href="index.html" style="font-size: 35px;font-weight: bold">
                        &nbsp;&nbsp;水果商城</el-link>
                </div>
            </el-col>
            <el-col :span="8">
                <div style="margin-top: 25px">
                    <div style="float: left;position: absolute;"><el-input placeholder="想查点什么呢..." style="width: 450px"></el-input></div>
                    <div style="position: relative;left: 410px;top: 10px"><i class="el-icon-search" style="font-size: 20px"></i></div>
                </div>
            </el-col>
            <el-col :span="8">
                <el-col :span="12">
                    <div style="margin-top: 25px">
                        <el-link type="info" href="cart.html" style="font-size: 23px;margin-left: -200px">
                            <i class="el-icon-shopping-cart-1"></i>&nbsp;&nbsp;我的购物车</el-link>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div style="margin-top: 40px">
                        <p style="font-size: 15px;text-align: left">
                            <i class="el-icon-user-solid"></i>
                            欢迎 <a
                                href="javascript:void(0);" @click="checkUser">{{user.nick}}</a></p>
                    </div>
                </el-col>
            </el-col>
        </el-row>
    </el-header>
    <el-main>
        <el-menu background-color="#ee4343"
                 text-color="#fff"
                 default-active="1"
                 active-text-color="#409EFF"
                 mode="horizontal"
                 style="width: auto;">
            <el-menu-item index="1">系统首页</el-menu-item>
            <el-menu-item index="2"><a href="center.html" style="text-decoration: none">个人中心</a></el-menu-item>
            <el-menu-item index="3"><a href="comments.html" style="text-decoration: none">评论区</a></el-menu-item>
            <el-menu-item index="4">商城中心</el-menu-item>
            <el-menu-item index="5">联系我们</el-menu-item>
            <el-menu-item index="6"><a href="#" @click="checkUserPer">后台管理</a></el-menu-item>
        </el-menu>
        <el-row style="margin-top: 10px">
            <el-col :span="4" offset="1">
                <el-menu style="background-color: rgba(0, 0, 0, 0.7)"
                         text-color="#fff"
                         active-text-color="#807A7A81"
                         default-active="2"
                         class="el-menu-vertical-demo"
                         @open="handleOpen"
                         @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                            <span @click="selectByCategory">总体分类</span>
                        </template>
                        <el-menu-item-group v-for="category in categoryArr">
                            <el-menu-item style="color: #303133">{{category.cname}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <span @click="selectByOrigin">地区分类</span>
                        </template>
                        <el-menu-item-group v-for="origin in originArr">
                            <el-menu-item style="color: #303133">{{origin.oname}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <span @click="selectByType">水果类型</span>
                        </template>
                        <el-menu-item-group v-for="type in typeArr">
                            <el-menu-item style="color: #303133">{{type.kname}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <span @click="selectByBrand">水果品牌</span>
                        </template>
                        <el-menu-item-group v-for="brand in brandArr">
                            <el-menu-item style="color: #303133">{{brand.bname}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <span @click="selectByCategory">廉价水果</span>
                        </template>
                        <el-menu-item-group v-for="category in categoryArr">
                            <el-menu-item style="color: #303133">{{category.cname}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="6">
                        <template slot="title">
                            <span @click="selectByCategory">南方水果</span>
                        </template>
                        <el-menu-item-group v-for="category in categoryArr">
                            <el-menu-item style="color: #303133">{{category.cname}}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
            <el-col :span="12">
                <template>
                    <el-carousel :interval="5000" arrow="always">
                        <el-carousel-item v-for="fruit in fruits" :key="fruit">
                            <img :src="fruit.url" width="100%" height="100%">
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </el-col>
            <el-col :span="6">
                <template>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="销量排行"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="水果名称"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="detail"
                                label="水果介绍">
                        </el-table-column>
                    </el-table>
                </template>
            </el-col>
        </el-row>
        <div>
            <h2>今日特价</h2>
            <el-card>
                <el-row gutter="20">
                    <el-col :span="4" v-for="fruit in selectFruitByType1">
                        <el-card>
                            <img :src="fruit.url" style=" width: 100%;height: 30px; display: block;">
                            <div style="margin: 0 auto">
                                <div style="font-size: 15px;color: #5daf34" >
                                    商品名称：{{fruit.name}}
                                </div>
                                <div style="font-size: 15px;color: #5daf34" >
                                    商品价格：{{fruit.oldPrice}}元
                                </div>
                                <div style="text-align: center">
                                    <el-button type="primary" icon="el-icon-shopping-cart-2" size="mini" @click="addCart(fruit.id)">购物车</el-button>
                                    <el-button type="info" icon="el-icon-share" size="mini" @click="location.href='details.html?id='+fruit.id">详情</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div>
            <h2>瓜果类</h2>
            <el-card>
                <el-row gutter="20">
                    <el-col :span="4" v-for="fruit in selectFruitByType2">
                        <el-card>
                            <img :src="fruit.url" style=" width: 100%;height: 181px; display: block;">
                            <div style="margin: 0 auto">
                                <div style="font-size: 15px;padding: 10px 0 5px 0 ;color: #5daf34" >
                                    商品名称：{{fruit.name}}
                                </div>
                                <div style="font-size: 15px;padding: 10px 0 5px 0;color: #5daf34" >
                                    商品价格：{{fruit.oldPrice}}元
                                </div>
                                <div style="text-align: center;padding: 10px 0px">
                                    <el-button type="primary" icon="el-icon-shopping-cart-2" size="mini" @click="addCart(fruit.id)">购物车</el-button>
                                    <el-button type="info" icon="el-icon-share" size="mini" @click="location.href='details.html?id='+fruit.id">详情</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div>
            <h2>核果类</h2>
            <el-card>
                <el-row gutter="20">
                    <el-col :span="4" v-for="fruit in selectFruitByType3">
                        <el-card>
                            <img :src="fruit.url" style=" width: 100%; height:181px;display: block;">
                            <div style="margin: 0 auto">
                                <div style="font-size: 15px;padding: 10px 0 5px 0 ;color: #5daf34" >
                                    商品名称：{{fruit.name}}
                                </div>
                                <div style="font-size: 15px;padding: 10px 0 5px 0;color: #5daf34">
                                    商品价格：{{fruit.oldPrice}}元
                                </div>
                                <div style="text-align: center;padding: 10px 0px">
                                    <el-button type="primary" icon="el-icon-shopping-cart-2" size="mini" @click="addCart(fruit.id)">购物车</el-button>
                                    <el-button type="info" icon="el-icon-share" size="mini" @click="location.href='details.html?id='+fruit.id">详情</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </el-main>
    <el-footer>
        <div id="footer_d1">
            <p>社区版水果商城</p>
            <p>本网页出自文曦玄武组,未经本小组允许不得抄袭</p>
            <p>若有问题联系我们组长：</p>
            <p>1915872962@qq.com</p>
        </div>
    </el-footer>
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                tableData:[],
                fruits:[],
                categoryArr:[],
                brandArr:[],
                originArr:[],
                typeArr:[],
                selectFruitByType1:[],
                selectFruitByType2:[],
                selectFruitByType3:[],
                fruitType:[],
                nameArr:[],
                user:{
                    nick:""
                }
            }
        },
        created:function (){
            axios.get("/category/select").then(function (response){
                v.fruitType = response.data;
            });
            axios.get("/banner/findBannerAll").then(function (response){
                v.fruits = response.data;
            });
            axios.get("/product/select?cId=1").then(function (response) {
                v.selectFruitByType1=response.data;
            });
            axios.get("/product/select?cId=2").then(function (response) {
                v.selectFruitByType2=response.data;
            });
            axios.get("/product/select?cId=4").then(function (response) {
                v.selectFruitByType3=response.data;
            });
            axios.get("/product/selectBySaleCount").then(function (response){
                v.tableData = response.data;
            });
            axios.get("/login/nick").then(function (response){
                v.user=response.data;
            });
        },
        methods:{
            addCart(id){
                if (v.user.id==null){
                    location.href="login.html"
                }else {
                    axios.get("/cart/addCart/"+id).then(function (response){
                        if(response.data==1){
                            v.$message({
                                showClose: true,//是否显示关闭按钮
                                message: "添加购物车成功!",
                                type: "success"
                            })
                        }else{
                            v.$message.error("添加购物车失败！");
                        }
                    });
                }
            },
            selectByCategory(){
                axios.get("/category/select").then(function (response){
                    v.categoryArr = response.data;
                    console.log(v.categoryArr);
                });
            },
            selectByBrand(){
                axios.get("/fruitbrand/select").then(function (response){
                    v.brandArr = response.data;
                    console.log(v.brandArr);
                })
            },
            selectByOrigin(){
                axios.get("fruitorigin/select").then(function (response){
                    v.originArr = response.data;
                    console.log(v.originArr);
                })
            },
            selectByType(){
                axios.get("fruittype/select").then(function (response){
                    v.typeArr = response.data;
                    console.log(v.typeArr);
                })
            },
            //检查用户权限
            checkUserPer(){
                if(v.user.permissionId===1){
                    location.href="admin.html"
                }else {
                    v.$message.error("您没有该权限！");
                }
            },
            checkUser(){
                if (v.user.id==null){
                    location.href="login.html"
                }else {
                    location.href="center.html"
                }
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            loginOut(){
                axios.get("/loginOut").then(function (response) {
                    if(response.data===1){
                        location.href="login.html"
                    }else {
                        v.$message.error("退出失败！");
                    }
                })
            }
        }
    })
</script>
</html>